<template>
  <div class="main">
    <div class="top-tip">
      <div class="text" @click="goDepositList()">押金明细</div>
    </div>
    <div class="content" v-for="(item,index) in dataList" :key="index" v-if="item.contentList.length > 0">
      <div class="big-title">{{item.bigTitle}}</div>
      <ul class="list" v-for="(i,key) in item.contentList" :key="key">
        <li v-if="i.type == 2 || i.type == 3" @click="handleClick(i.type)">
          <div class="arrow"><img src="/static/images/arrow_r.png"></div>
          <p class="list-title">{{i.title}}</p>
          <p class="list-tips"><wxParse :content="i.lines" className="wxParse-dispatch"></wxParse></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import wxParse from 'mpvue-wxparse'
  import Service from '@/utils/service'

  export default {
    components: {
      wxParse
    },
    data() {
      return {
        dataList: [],
        showBox1: false,
        changDeposit: '押金'
      }
    },
    onUnload() {
      let pages = getCurrentPages()
      let prevPage = pages.length > 1 ? pages[pages.length - 2] : null;
      if (prevPage != null && prevPage.route == 'pages/login/main') {
        setTimeout(() => {
          wx.reLaunch({
            url: '../index/main'
          })
        },200)
      }
      Object.assign(this.$data, this.$options.data())
    },
    onLoad(options) {

    },
    onShow() {
      this.getDepositPay()
      this.checkLogin()
    },
    methods: {
      checkLogin() {
        let data = {
//          adCode: '130100',
          noLoading: true
        }
        Service.checkLogin(data).then((res) => {
          if (res.data) {
            this.changDeposit = res.data.changDeposit
          }
        })

      },
      goDepositList() {
        wx.navigateTo({
          url: "/pages/cashList/main"
        })
      },
      handleClick(type) {
        if (type == 3) { //缴纳押金
          if (!this.disable) {
            this.payment()
          }
        } else if (type == 2) {
          wx.navigateTo({
            url: "/pages/cardShop/main"
          });
        }
      },
      getDepositPay() {

        Array.prototype.remove = function(val) {
          var index = this.indexOf(val);
          if (index > -1) {
            this.splice(index, 1);
          }
        };
        Service.getDepositPay().then((res) => {
          if (res.code == 200) {
            let list = res.data
            list.forEach((item) => {
              item.contentList.forEach((i) => {
                if (i.type != 2 && i.type != 3) {
                  item.contentList.remove(i)
                }
              })
              item.contentList.forEach((i) => {
                i.lines = i.lines.replace(/\n/g,"<br/>")
              })
            })
            this.dataList = list
          }
        })
      },
      payment() {
        let _this = this
        this.disable = true
        setTimeout(() => {
          _this.disable = false
        }, 2000)
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
            if (res.code) {
              let data = {code: res.code}
              Service.jscode2session(data).then((res) => {
                if (res) {
                  let data = {
                    payMethod: '1',//微信
                    paymentType: '19',//押金
                    openId: res.openid
                  }
                  Service.prePay(data).then((res) => {
                    if (res.code == 200) {
                      let payParam = res.data
                      wx.requestPayment({
                        timeStamp: res.data.timeStamp + '',
                        nonceStr: res.data.nonceStr + '',
                        package: res.data.package + '',
                        signType: 'MD5',
                        paySign: res.data.sign + '',
                        success(res) {
                          wx.showToast({
                            title: '支付成功',
                            icon: 'success',
                            duration: 2000
                          });
                          setTimeout(() => {
                            wx.reLaunch({
                              url: '../success/main'
                            })
                          }, 200)
                        },
                        fail(res) {
                          _this.disable = false
                        }
                      })
                    }
                  })
                }
              })
            }
          }
        })

      }
    }
  }
</script>

<style scoped>
  .main {
    padding: 0 40px;
  }

  .top-tip {
    padding-top: 30px;
    overflow: hidden;
  }

  .top-tip .text {
    float: right;
    font-size: 30px;
    color: #666;
  }

  .big-title {
    padding-bottom: 30px;
    font-size:46px;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:65px;
  }
  .content{
    padding-bottom: 20px;
  }
  .list li{
    position: relative;
    width:100%;
    margin-bottom: 30px;
    padding: 30px 40px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 10px 0px rgba(0,0,0,0.1);
    border-radius:10px;
    box-sizing: border-box;
  }
  .arrow{
    position: absolute;
    width: 28px;
    height: 28px;
    top: 39px;
    right: 20px;
  }
  .arrow img{
    width: 28px;
    height: 28px;
  }
  .list-title{
    padding-bottom: 20px;
    font-size:32px;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:45px;
  }
  .list-tips{
    font-size:28px;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:40px;
  }
</style>
